<template>
  <div>
 <!-- home页面 -->
 <!-- 头部navbar -->
  <van-nav-bar fixed>
  <template #left>
    <img :src="imgobj" class="logo">
  </template>
  <template #right>
    <van-icon name="search" size="0.48rem" @click="$router.push({path:'/search'})"/>
  </template>
</van-nav-bar>
<van-popup v-model="show" class="edit_wrap">
  <div class="popup-container">
    <!-- 弹出层的头部区域 -->
    <van-nav-bar title="频道管理">
      <template #right>
        <van-icon name="cross" size="0.3733rem" color="white" @click="updatechannel" />
      </template>
    </van-nav-bar>
 <div class="pop-body">
      <ChannelEdit :userchannelList="channelList"
      :allChannel="allChannel"
      @channelid="channelidchange"></ChannelEdit>
    </div>
     </div>
    </van-popup>
<!-- 频道tabs -->
<van-tabs v-model="active" animated sticky offset-top="1.226667rem"
@click="onClick">
  <van-tab :title="item.name" v-for="item in channelList" :key="item.id" :name="item.id">

<!-- 文章列表内容 -->
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
  offset-top="1.22666667rem"
>
  <ArtileList :arr="artilelist"
    @firstaction="firstactionfn"
      @secondaction="secondactionfn"></ArtileList>
</van-list>
</van-pull-refresh>
 </van-tab>
</van-tabs>
<van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show=!show"/>

  </div>
</template>

<script>
import imgobj from '@/assets/logo.png'
import ArtileList from './Artile/ArtileList.vue'

import { userChannelListAPI, getArtileAPI, dislikeAPI, responentAPI, allChannelListAPI } from '@/api'

import { getTime } from '@/utils/datetime.js'
import ChannelEdit from './ChannelEdit'
import { Mytitle } from '@/utils/Notify.js'
const catchObj = {}// 这个大对象里面装 频道:文章列表数据,数据层面缓存
export default {
  data () {
    return {
      imgobj: imgobj, // logo 图片地址
      active: 0, // 频道列表(一般是下标,通过tab的name设置),现在是id
      channelList: [], // 获取用户选定频道的id 和 name
      channelId: 0, // 用户选定频道的ID
      artilelist: [], // 文章列表
      timestamp: null, // 分页传的时间戳
      loading: false, // 上滑加载
      finished: false,
      isLoading: false, // 下拉刷新控制加载状态是隐藏还是显示
      show: false, // 控制组件的显示隐藏
      allChannel: []// 所有频道
    }
  },
  components: {
    ArtileList,
    ChannelEdit
  },
  async created () {
    // 获取频道列表
    const res = await userChannelListAPI()
    const res2 = await allChannelListAPI()
    // console.log(res2)
    this.allChannel = res2.data.data.channels// 所有频道
    this.channelList = res.data.data.channels// 用户选定频道列表
    this.getArticleList()
  },
  methods: {
    getTime,
    async getArticleList () {
      if (catchObj[this.channelId]?.arr && this.loading === false) { // 从变量缓存中取值
        this.artilelist = catchObj[this.channelId].arr
        this.timestamp = catchObj[this.channelId]?.timestamp // 当前频道下一页id
        this.$nextTick(() => {
          window.scrollTo(0, catchObj[this.channelId].topscoll)
        })
      } else {
        // 获取推荐文章数据
        const res2 = await getArtileAPI({ channelId: this.channelId, timestamp: this.timestamp })
        if (res2.data.data.results.length === 0) {
          this.finished = true
          return
        }
        // console.log(this.artilelist)
        this.artilelist = [...this.artilelist, ...res2.data.data.results]// 将文章数据赋值给文章列表数组
        // console.log(this.artilelist)
        //   时间处理
        res2.data.data.results.forEach(obj => {
          obj.pubdate = getTime(obj.pubdate)
        })

        // 页面数据缓存到数组中
        catchObj[this.channelId] = {}
        catchObj[this.channelId].arr = this.artilelist
        this.timestamp = res2.data.data.pre_timestamp
        catchObj[this.channelId].timestamp = res2.data.data.pre_timestamp// 用于设置分页
        this.loading = false
        this.isLoading = false
      }
    },
    // 点击频道标签,切换频道
    onClick (channelId) {
      catchObj[this.channelId].topscoll = window.scrollY
      //   console.log(channelId)
      this.channelId = channelId
      //   console.log(channelId)
      //   this.timestamp = catchObj[this.channelId].timestamp
      this.timestamp = null
      this.artilelist = []
      this.getArticleList()// 当点击的时候 ,我们会发现请求回来的数据会拼接artilelist数组中,每个频道看到的都是一样的
      //   所以我们需要让数组为空 上次请求时间戳为null 再次请求数据,所以直接调用刷新
    },

    // 上拉加载
    onLoad () {
      // axios请求是异步的,防止请求晚回来造成触底加载
      if (this.artilelist.length === 0) {
        // this.loading = false
        // console.log(2)
        return
      }
      this.getArticleList()
    //   console.log(1)
    },
    // 下载刷新
    onRefresh () {
      this.timestamp = null
      catchObj[this.channelId].timestamp = null
      // 将数据缓存的文章列表也清空
      catchObj[this.channelId].arr = null
      this.artilelist = []// 把原来的文章列表清除
      this.getArticleList()
    },
    // 不感兴趣
    async firstactionfn (action, artId) {
      //   action.name="反馈" 文章列表artilelist删除这个
      const index = this.artilelist.findIndex((obj) => {
        return obj.art_id === artId
      })
      console.log(action, artId)
      this.artilelist.splice(index, 1)
      await dislikeAPI(artId)
      Mytitle({ type: 'success', message: '反馈成功' })
      // 掉接口,删数据,补数据
    },
    // 反馈垃圾内容
    async secondactionfn (secondactions, artId) {
      // secondactions.name="其他问题"  action.value="0"
      const index = this.artilelist.findIndex((obj) => {
        return obj.art_id === artId
      })
      //   console.log(secondactions, artId)
      this.artilelist.splice(index, 1)
      //   // 掉接口,删数据,补数据
      await responentAPI(artId, secondactions.value, secondactions.value + '')
      Mytitle({ type: 'success', message: '反馈成功' })
    },
    async updatechannel () {
      this.show = false
      const res = await userChannelListAPI()
      this.channelList = res.data.data.channels
    },
    // 编辑完频道之后,频道栏选中要进入的频道
    channelidchange (obj) {
      this.show = false
      this.active = obj.id
      this.channelId = obj.id
      this.onRefresh(obj.id)
    }

  },
  beforeRouteLeave (to, from, next) {
    from.meta.istop = window.scrollY
    next()
  },
  activated () {
    //   当真实dom渲染完成后
    this.$nextTick(() => {
      if (this.$route.meta.istrue) {
        window.scrollTo(0, this.$route.meta.istop)
      }
    })
  }

}
</script>

<style scoped lang="less">
.logo {
    width: 100px;
    height: 30px;
}
.van-tabs--line{
    padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.edit_wrap{
  width: 100%;
  height: 100%;
}

</style>
